<template>
    <div>
        <el-button type="primary" plain @click="handleEditor('add')">添加分类</el-button>
        <div class="table-class">
            <el-table :data="categoryList" border style="width: 100%">
                <el-table-column fixed prop="id" label="ID">
                </el-table-column>
                <el-table-column prop="categoryName" label="名称">
                </el-table-column>
                <el-table-column prop="sequence" label="排序">
                </el-table-column>
                <!-- <el-table-column prop="status" :formatter="statusFormatter" label="状态"> -->
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" active-color="#13ce66"
                            inactive-color="#ff4949" :disabled="true">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleEditor('update', scope.row.id)" type="text" size="small">编辑</el-button>
                        <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info"
                            icon-color="red" title="这是一段内容确定删除吗？" @onConfirm="delCategory(scope.row.id)">
                            <el-button slot="reference" type="text" size="small">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="total,prev, pager, next,sizes" :total="page.total" :page-size.sync="page.size"
                :pager-count="5" :current-page.sync="page.page" :page-sizes="[1, 10, 20, 50, 100, 500]"
                @current-change="pageChange" @prev-click="page.page--" @next-click="page.page++" @size-change="sizeChange"
                :hide-on-single-page="false">
            </el-pagination>
        </div>


        <el-dialog :title="is_update ? '分类编辑' : '添加分类'" :visible.sync="dialogFormVisible">
            <el-form :model="categoryForm">
                <el-form-item label="名称">
                    <el-input v-model="categoryForm.categoryName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="categoryForm.sequence" type="number" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="categoryForm.status" :active-value="1" :inactive-value="0" active-color="#13ce66"
                        inactive-color="#ff4949" :disabled="!is_update">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editorCancel">取 消</el-button>
                <el-button type="primary" @click="editorSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { page, queryById, updateById, deleteById, add } from '@/api/category'
import { mapGetters } from 'vuex'
export default {
    //import引入组件才能使用
    components: {},
    props: {},
    data() {
        return {
            categoryList: [],
            page: {
                page: 1,
                size: 1,
                total: 0
            },
            dialogFormVisible: false,
            categoryForm: {},
            is_update: false
        };
    },
    // 计算属性
    computed: {
        ...mapGetters([
            'shopId'
        ])
    },
    // 监听data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        pageChange(page) {
            this.page.page = page
            this.initPage()
        },
        sizeChange(size) {
            this.page.size = size
            this.initPage()
        },
        initPage() {
            page({ page: this.page.page, size: this.page.size }).then(response => {
                this.categoryList = response.data.list
                this.page.total = response.data.total
            })
        },
        statusFormatter(row, column, cellValue, index) {
            return cellValue === 1 ? '启用' : '禁用'
        },
        handleEditor(type, id) {
            if (type === 'update') {
                this.is_update = true
                queryById(id).then(response => {
                    this.categoryForm = response.data
                    this.dialogFormVisible = true
                })
            } else {
                this.is_update = false
                this.dialogFormVisible = true
                this.categoryForm = {
                    shopId: this.shopId
                }
            }

        },
        editorCancel() {
            this.dialogFormVisible = false
            this.categoryForm = {}
        },
        editorSubmit() {
            if (this.is_update) {
                updateById(this.categoryForm).then(response => {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.initPage()
                    this.dialogFormVisible = false
                    this.categoryForm = {}
                }).catch(error => {
                    this.$message.error(error.message)
                })
            } else {
                add(this.categoryForm).then(response => {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.initPage()
                    this.dialogFormVisible = false
                    this.categoryForm = {}
                }).catch(error => {
                    this.$message.error(error.message)
                })
            }


        },
        delCategory(id) {
            deleteById(id).then(response => {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                this.initPage()
            }).catch(error => {
                this.$message.error(error.message)
            })
        }

    },
    // 生命周期，创建完成时（可以访问当前this实例）
    created() {
        this.initPage()
    },
    // 生命周期：挂载完成时（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { },//生命周期：创建之前
    beforeMount() { },//生命周期：挂载之前
    beforeUpdate() { },//生命周期：更新之前
    updated() { },//生命周期：更新之后
    beforeDestroy() { },//生命周期：销毁之前
    destroyed() { },//生命周期：销毁完成
    activated() { },//如果页面有keep-alive缓存功能，这个函数会触发执行
}
</script>
<style scoped>

</style>
